/* eslint-disable import/no-anonymous-default-export */
/* eslint-disable jsx-a11y/anchor-is-valid */

import "./style.scss";
import { useState, useEffect, useContext, useRef } from "react";
import { useNavigate, useLocation } from "react-router";
import LogoImg from "../../assets/img/logo-min.png";
import {
  Select,
  Input,
  Checkbox,
  Tabs,
  Pagination,
  Button,
  message,
  Spin,
} from "antd";
import {
  CloudUploadOutlined,
  FilePdfOutlined,
  ClockCircleOutlined,
  PlusOutlined,
  UserAddOutlined,
  VerticalAlignBottomOutlined,
} from "@ant-design/icons";
import {
  getJobQuery,
  postCompanyInfo,
  postWorkFlow,
} from "../../api/recruit-manage";
import { putFile } from "../../api/oss";
import { UserContext } from "../../store/user";

const itemsTab = [
  {
    key: "qi_ye_renzheng",
    label: "企业认证",
    children: "",
  },
  {
    key: "zhi_wei_guanli",
    label: "职位管理",
    children: "",
  },
  {
    key: "hou_xuan_ren_guanli",
    label: "候选人管理",
    children: "",
  },
];

export default () => {
  const [messageApi, contextHolder] = message.useMessage();
  const fileRef = useRef();
  const jobTableRef = useRef();
  const navigate = useNavigate();
  // const location = useLocation();
  const [activeKey, setActiveKey] = useState("qi_ye_renzheng");
  const [zhiWeiPage, setZhiWeiPage] = useState(1);

  const [workLoading, setWorkLoading] = useState(false);

  const [workFlowArr, setWorkFlowArr] = useState([
    {
      companyName: "", // 企业全称
      unifiedSocialCreditCode: "", // 统一信用代码
      region: "", // 区域
      industry: "", // 所属行业
      companyScale: "", // 企业规模
      companyWebsite: "", // 企业官网
      companyCertImageUrlOne: "", // 营业执照url
      companyCertImageUrlTwo: "",
      companyCertImageUrlThree: "",
    },
  ]);
  const [companyInfo, setCompanyInfo] = useState([]);

  const ctx = useContext(UserContext);
  // console.log('ctx=', ctx)
  const user = ctx.user;

  // 职位列表数据
  const [jobTable, setJobTable] = useState([]);
  const [jobTotal, setJobTotal] = useState(0);
  const [jobPageSize, setJobPageSize] = useState(20)

  const onZhiWeiPageChange = (pageNumber) => {
    // console.log('Page: ', pageNumber);
    setZhiWeiPage(pageNumber);
  };

  // 处理从发布职位表单页返回的处理
  useEffect(() => {
    if (sessionStorage["pub-sucess"]) {
      // delete sessionStorage["pub-sucess"];
      // 说明是从发布职位完跳转回来的
      setActiveKey("zhi_wei_guanli");
    } else if (sessionStorage["recruite-view"] === "return") {
      // delete sessionStorage["recruite-view"];
      // 说明是从发布职位完跳转回来的
      setActiveKey("zhi_wei_guanli");
      setTimeout(() => {
        jobTableRef.current.scrollIntoView();
      }, 500);
    }

    if( sessionStorage['recruite-page'] ){
      setZhiWeiPage(Number(sessionStorage['recruite-page']))
    }

    delete sessionStorage["pub-sucess"];
    delete sessionStorage["recruite-view"];
    delete sessionStorage['recruite-page']
  }, []);

  // 查询企业认证情况
  useEffect(() => {
    (async () => {
      let res = await postCompanyInfo({
        loginBizId: user.loginBizId,
        userType: user.userType,
        companyName: "",
      });
      // console.log('res====>', res.result)
      let nextWorkFlowArr = res.result ?? [];

      setCompanyInfo(res.result);
      setWorkFlowArr(
        nextWorkFlowArr.length > 0
          ? nextWorkFlowArr
          : [
              {
                companyName: "", // 企业全称
                unifiedSocialCreditCode: "", // 统一信用代码
                region: "", // 区域
                industry: "", // 所属行业
                companyScale: "", // 企业规模
                companyWebsite: "", // 企业官网
                companyCertImageUrlOne: "", // 营业执照url
                companyCertImageUrlTwo: "",
                companyCertImageUrlThree: "",
              },
            ]
      );
    })();
  }, []);

  // 职位列表
  useEffect(() => {
    if (activeKey === "zhi_wei_guanli") {
      (async () => {
        let res = await getJobQuery({
          pageNum: zhiWeiPage,
          pageSize: 20,
          data: {},
          sortList: [
            {
              sortParamName: "string",
              sortType: "string",
            },
          ],
        });

        // console.log('table: ', res);
        setJobTable(res?.result?.list ?? []);
        setJobTotal(res?.result.total);
      })();
    }
  }, [activeKey, zhiWeiPage]);

  useEffect(() => {
    // 自定义复选框
    const checkboxes = document.querySelectorAll(".custom-checkbox");
    checkboxes.forEach((checkbox) => {
      checkbox.addEventListener("click", () => {
        checkbox.classList.toggle("checked");
      });
    });
  }, []);

  useEffect(() => {
    // 自定义单选框
    const radios = document.querySelectorAll(".custom-radio");
    radios.forEach((radio) => {
      radio.addEventListener("click", () => {
        // 清除同组中所有单选框的选中状态
        const name =
          radio.getAttribute("id").split("-")[0] +
          "-" +
          radio.getAttribute("id").split("-")[1];
        document.querySelectorAll(`[id^="${name}"]`).forEach((r) => {
          r.classList.remove("checked");
        });
        // 设置当前单选框为选中状态
        radio.classList.add("checked");
      });
    });
  }, []);

  return (
    <>
      {contextHolder}
      <div className="bg-gray-50 min-h-screen recruit-manage-page">
        <header className="bg-white shadow-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-3 flex items-center justify-between">
            <div className="flex items-center gap-8">
              <a
                onClick={() => {
                  navigate("/", { replace: true });
                }}
                className="flex items-center text-gray-600 hover:text-primary transition-colors"
              >
                {/* <div className="w-8 h-8 flex items-center justify-center">
                <i className="ri-arrow-left-line ri-lg"></i>
              </div> */}
                <span className="ml-1">返回首页</span>
              </a>
              <div className="font-['Pacifico'] text-2xl text-primary">
                <img src={LogoImg} width={80} alt="" />
              </div>
              <nav className="hidden md:flex items-center space-x-6">
                <a href="#" className="text-primary font-medium">
                  招聘管理
                </a>
                <a
                  href="#"
                  className="text-gray-600 hover:text-primary transition-colors"
                >
                  人才库
                </a>
                <a
                  href="#"
                  className="text-gray-600 hover:text-primary transition-colors"
                >
                  数据分析
                </a>
                <a
                  href="#"
                  className="text-gray-600 hover:text-primary transition-colors"
                >
                  帮助中心
                </a>
              </nav>
            </div>

            <div className="flex items-center gap-4 group relative">
              <div className="absolute right-0 top-[120%] -mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden group-hover:block">
                <a
                  onClick={() => {
                    // alert(123);
                    ctx.logout();
                  }}
                  data-readdy="true"
                  className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
                >
                  <div className="flex items-center pointer">
                    <span>退出登录</span>
                  </div>
                </a>
              </div>
              <div className="flex items-center gap-2 cursor-pointer">
                {/* <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white">
                <i className="ri-user-line"></i>
              </div> */}
                <span className="text-gray-700 hidden md:inline-block">
                  {user.loginBizId}
                </span>
              </div>
            </div>
          </div>
        </header>

        <main className="container mx-auto px-4 py-6">
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-gray-900">
              欢迎使用 AI 智能招聘管理平台
            </h1>
            <p className="text-gray-600 mt-2">
              完成以下步骤，快速开启您的智能招聘之旅
            </p>
          </div>

          <div className="bg-white rounded-lg shadow-sm overflow-hidden">
            <div className="px-3">
              <Tabs
                activeKey={activeKey}
                items={itemsTab}
                onChange={(aKey) => {
                  // console.log('active: ', aKey)
                  setActiveKey(aKey);
                }}
              />
            </div>
            <div className="p-6">
              {activeKey === "qi_ye_renzheng" && (
                <Spin spinning={workLoading}>
                  {workFlowArr.map((rowObj, index) => (
                    <div key={index} className="certification tab-content">
                      <div className="mb-6">
                        <div className="flex items-center justify-between mb-4">
                          <h2 className="text-xl font-semibold text-gray-800">
                            企业认证
                          </h2>
                          {/* <div className="flex items-center gap-2 bg-blue-50 text-primary px-3 py-1 rounded-full">
                    <ClockCircleOutlined />
                    <span className="text-sm">认证审核中</span>
                  </div> */}
                        </div>
                        <p className="text-gray-600">
                          完成企业认证，获得更多招聘特权和AI智能匹配服务
                        </p>
                      </div>

                      <div className="mb-8 hidden">
                        <div className="flex items-center justify-between mb-4">
                          <h3 className="font-medium text-gray-700">
                            认证进度
                          </h3>
                          <span className="text-primary text-sm">
                            2/3 步骤已完成
                          </span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div
                            className="bg-primary h-2 rounded-full"
                            style={{ width: "66%" }}
                          ></div>
                        </div>
                        <div className="flex justify-between mt-2 text-xs text-gray-500">
                          <span>基本信息</span>
                          <span>营业执照</span>
                          <span>联系人验证</span>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            企业全称
                          </label>
                          <Input
                            disabled={companyInfo.length > 0}
                            value={rowObj.companyName}
                            onChange={(ev) => {
                              let nextArr = [...workFlowArr];
                              nextArr[index].companyName =
                                ev.target.value.trim();
                              setWorkFlowArr(nextArr);
                            }}
                            placeholder="请输入企业全称"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            统一社会信用代码
                          </label>
                          <Input
                            disabled={companyInfo.length > 0}
                            value={rowObj.unifiedSocialCreditCode}
                            onChange={(ev) => {
                              let nextArr = [...workFlowArr];
                              nextArr[index].unifiedSocialCreditCode =
                                ev.target.value.trim();
                              setWorkFlowArr(nextArr);
                            }}
                            placeholder="请输入统一社会信用代码"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            所在地区
                          </label>
                          <div className="relative">
                            {/* <select className="w-full px-4 py-2 border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8">
                      <option>北京市</option>
                      <option>上海市</option>
                      <option>广州市</option>
                      <option>深圳市</option>
                    </select>
                    <div className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                      <i className="ri-arrow-down-s-line"></i>
                    </div> */}
                            <Select
                              disabled={companyInfo.length > 0}
                              value={rowObj.region}
                              onChange={(val) => {
                                let nextArr = [...workFlowArr];
                                nextArr[index].region = val;
                                setWorkFlowArr(nextArr);
                              }}
                              placeholder="请选择所在地区"
                              style={{ width: "100%" }}
                              options={[
                                { value: "北京市", label: "北京市" },
                                { value: "上海市", label: "上海市" },
                                { value: "广州市", label: "广州市" },
                                { value: "深圳市", label: "深圳市" },
                              ]}
                            />
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            企业规模
                          </label>
                          <div className="relative">
                            <Select
                              disabled={companyInfo.length > 0}
                              value={rowObj.companyScale}
                              onChange={(val) => {
                                let nextArr = [...workFlowArr];
                                nextArr[index].companyScale = val;
                                setWorkFlowArr(nextArr);
                              }}
                              placeholder="请选择企业规模"
                              style={{ width: "100%" }}
                              options={[
                                { value: "50-99人", label: "50-99人" },
                                { value: "100-499人", label: "100-499人" },
                                { value: "500-999人", label: "500-999人" },
                                { value: "1000人以上", label: "1000人以上" },
                              ]}
                            />
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            所属行业
                          </label>
                          <div className="relative">
                            <Select
                              disabled={companyInfo.length > 0}
                              value={rowObj.industry}
                              onChange={(val) => {
                                let nextArr = [...workFlowArr];
                                nextArr[index].industry = val;
                                setWorkFlowArr(nextArr);
                              }}
                              placeholder="请选择所属行业"
                              style={{ width: "100%" }}
                              options={[
                                {
                                  value: "互联网/IT/软件",
                                  label: "互联网/IT/软件",
                                },
                                {
                                  value: "金融/银行/保险",
                                  label: "金融/银行/保险",
                                },
                                { value: "教育/培训", label: "教育/培训" },
                                { value: "医疗/健康", label: "医疗/健康" },
                                { value: "其它", label: "其它" },
                              ]}
                            />
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">
                            企业官网
                          </label>
                          <Input
                            disabled={companyInfo.length > 0}
                            value={rowObj.companyWebsite}
                            onChange={(ev) => {
                              let nextArr = [...workFlowArr];
                              nextArr[index].companyWebsite =
                                ev.target.value.trim();
                              setWorkFlowArr(nextArr);
                            }}
                            placeholder="请输入企业官网"
                          />
                        </div>
                      </div>

                      <div className="mb-8">
                        <h3 className="font-medium text-gray-700 mb-4">
                          营业执照上传
                        </h3>
                        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center h-[190px] relative">
                          {rowObj.companyCertImageUrlOne ? (
                            <>
                              <FilePdfOutlined style={{ fontSize: 36 }} />
                              {/* <div><a href={rowObj.companyCertImageUrlOne}>预览</a></div> */}
                              <div>
                                <a
                                  className="text-primary"
                                  onClick={() => {
                                    window.open(
                                      rowObj.companyCertImageUrlOne,
                                      "_blank"
                                    );
                                  }}
                                >
                                  下载
                                </a>
                              </div>
                            </>
                          ) : (
                            <>
                              {!rowObj.companyCertImageUrlTwo && (
                                <>
                                  <CloudUploadOutlined
                                    style={{ fontSize: 36, color: "#2563eb" }}
                                  />
                                  <p className="text-gray-600 mb-2">
                                    点击或拖拽文件到此处上传
                                  </p>
                                  <p className="text-gray-500 text-sm mb-4">
                                    支持 JPG、PNG、PDF 格式，大小不超过 10MB
                                  </p>
                                  <button className="bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
                                    上传营业执照
                                  </button>
                                </>
                              )}
                              <input
                                type="file"
                                ref={fileRef}
                                className="absolute inset-0 opacity-0"
                                title=""
                                accept="application/pdf, image/png, image/jpeg"
                                onChange={(ev) => {
                                  const file = ev.target.files[0];
                                  if (file.size > 10 * 1024 * 1024) {
                                    messageApi.open({
                                      type: "error",
                                      content: "上传的文件大小不能超过10MB",
                                    });
                                    return;
                                  }
                                  (async () => {
                                    let url = await putFile(ev.target.files[0]);
                                    let nextArr = [...workFlowArr];
                                    nextArr[index].companyCertImageUrlOne = url;
                                    // nextArr[index].companyCertImageUrlTwo = url;
                                    setWorkFlowArr(nextArr);
                                    ev.target.value = "";
                                  })();
                                }}
                              />
                              {rowObj.companyCertImageUrlOne && (
                                <div className="absolute inset-0">
                                  <div className="py-5">
                                    <FilePdfOutlined style={{ fontSize: 36 }} />
                                    <div className="pt-2">
                                      <a
                                        className="text-primary"
                                        onClick={() => {
                                          window.open(
                                            rowObj.companyCertImageUrlOne,
                                            "_blank"
                                          );
                                        }}
                                      >
                                        下载
                                      </a>
                                      <a
                                        className="text-red-500 ml-2"
                                        onClick={() => {
                                          let nextArr = [...workFlowArr];
                                          nextArr[
                                            index
                                          ].companyCertImageUrlOne = "";
                                          // nextArr[
                                          //   index
                                          // ].companyCertImageUrlTwo = "";
                                          setWorkFlowArr(nextArr);
                                        }}
                                      >
                                        删除
                                      </a>
                                    </div>
                                  </div>
                                </div>
                              )}
                            </>
                          )}
                        </div>
                      </div>

                      <div className="mb-8 hidden">
                        <h3 className="font-medium text-gray-700 mb-4">
                          联系人信息
                        </h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                              联系人姓名
                            </label>
                            <Input
                              defaultValue=""
                              placeholder="请输入联系人姓名"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                              职位
                            </label>
                            <Input
                              defaultValue="人力资源总监"
                              placeholder="请输入职位"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                              手机号码
                            </label>
                            <div className="relative">
                              <Input
                                defaultValue=""
                                placeholder="请输入手机号码"
                              />
                              <button className="absolute right-2 top-1/2 transform -translate-y-1/2 text-primary text-sm">
                                获取验证码
                              </button>
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                              验证码
                            </label>
                            <Input defaultValue="" placeholder="请输入验证码" />
                          </div>
                        </div>
                      </div>

                      <div className="flex justify-end">
                        {/* <button className="bg-primary text-white px-6 py-2 rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
                        提交认证
                      </button> */}
                        {companyInfo.length === 0 && (
                          <Button
                            type="primary"
                            onClick={() => {
                              let postData = [];
                              for (let r = 0; r < workFlowArr.length; r++) {
                                if (!workFlowArr[r].companyName) {
                                  messageApi.open({
                                    type: "error",
                                    content: "企业全称必填",
                                  });
                                  return;
                                }

                                if (!workFlowArr[r].unifiedSocialCreditCode) {
                                  messageApi.open({
                                    type: "error",
                                    content: "统一社会信用代码必填",
                                  });
                                  return;
                                }

                                if (!workFlowArr[r].region) {
                                  messageApi.open({
                                    type: "error",
                                    content: "所在地区必填",
                                  });
                                  return;
                                }

                                if (!workFlowArr[r].industry) {
                                  messageApi.open({
                                    type: "error",
                                    content: "所属行业必填",
                                  });
                                  return;
                                }

                                if (!workFlowArr[r].companyScale) {
                                  messageApi.open({
                                    type: "error",
                                    content: "企业规模必填",
                                  });
                                  return;
                                }

                                if (!workFlowArr[r].companyCertImageUrlOne) {
                                  messageApi.open({
                                    type: "error",
                                    content: "请上传营业执照",
                                  });
                                  return;
                                }

                                postData.push({
                                  loginBizId: user.loginBizId,
                                  userType: user.userType,
                                  companyName: workFlowArr[r].companyName,
                                  unifiedSocialCreditCode:
                                    workFlowArr[r].unifiedSocialCreditCode,
                                  region: workFlowArr[r].region,
                                  industry: workFlowArr[r].industry,
                                  companyScale: workFlowArr[r].companyScale,
                                  companyWebsite: workFlowArr[r].companyWebsite,
                                  companyCertImageUrlOne:
                                    workFlowArr[r].companyCertImageUrlOne,
                                });
                              } // for r

                              (async () => {
                                setWorkLoading(true);
                                try {
                                  let res = await postWorkFlow(postData);
                                  setWorkFlowArr(res.result ?? []);
                                } catch (e) {
                                  console.log(e);
                                } finally {
                                  setWorkLoading(false);
                                }
                              })();
                            }}
                          >
                            提交认证
                          </Button>
                        )}
                      </div>
                    </div>
                  ))}
                </Spin>
              )}

              {activeKey === "zhi_wei_guanli" && (
                <div id="job-management" className="tab-content">
                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-4">
                      <h2 className="text-xl font-semibold text-gray-800">
                        职位管理
                      </h2>
                      <button className="bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-600 transition-colors flex items-center gap-2 whitespace-nowrap">
                        <PlusOutlined />
                        <span
                          onClick={() => {
                            navigate("/jobpost");
                          }}
                        >
                          发布新职位
                        </span>
                      </button>
                    </div>
                    <p className="text-gray-600">
                      管理您的招聘职位，跟踪申请进度
                    </p>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
                    <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-gray-600 text-sm">在招职位</span>
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          <i className="ri-briefcase-4-line"></i>
                        </div>
                      </div>
                      <div className="text-2xl font-bold text-gray-800">12</div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-gray-600 text-sm">收到简历</span>
                        <div className="w-8 h-8 flex items-center justify-center bg-green-50 text-green-500 rounded-full">
                          <i className="ri-file-user-line"></i>
                        </div>
                      </div>
                      <div className="text-2xl font-bold text-gray-800">
                        186
                      </div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-gray-600 text-sm">面试中</span>
                        <div className="w-8 h-8 flex items-center justify-center bg-yellow-50 text-yellow-500 rounded-full">
                          <i className="ri-calendar-check-line"></i>
                        </div>
                      </div>
                      <div className="text-2xl font-bold text-gray-800">32</div>
                    </div>
                    <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-gray-600 text-sm">已入职</span>
                        <div className="w-8 h-8 flex items-center justify-center bg-purple-50 text-purple-500 rounded-full">
                          <i className="ri-user-add-line"></i>
                        </div>
                      </div>
                      <div className="text-2xl font-bold text-gray-800">8</div>
                    </div>
                  </div>

                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="font-medium text-gray-700">职位列表</h3>
                      <div className="flex items-center gap-4">
                        <div className="relative">
                          <input
                            type="text"
                            className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm"
                            placeholder="搜索职位名称"
                          />
                          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center text-gray-400">
                            <i className="ri-search-line"></i>
                          </div>
                        </div>
                        <div className="relative">
                          <select className="pl-4 pr-8 py-2 border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
                            <option>全部状态</option>
                            <option>招聘中</option>
                            <option>已暂停</option>
                            <option>已结束</option>
                          </select>
                          <div className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                            <i className="ri-arrow-down-s-line"></i>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="overflow-x-auto">
                      <table
                        className="w-full border-collapse"
                        ref={jobTableRef}
                      >
                        <thead>
                          <tr className="bg-gray-50 text-left">
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              职位名称
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              部门
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              工作地点
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              招聘人数
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              收到简历
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              状态
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              发布时间
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              操作
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          {/* <tr className="border-b border-gray-200">
                          <td className="px-4 py-4">
                            <div className="font-medium text-gray-800">
                              高级前端工程师
                            </div>
                          </td>
                          <td className="px-4 py-4 text-gray-600">技术部</td>
                          <td className="px-4 py-4 text-gray-600">北京</td>
                          <td className="px-4 py-4 text-gray-600">3</td>
                          <td className="px-4 py-4 text-gray-600">42</td>
                          <td className="px-4 py-4">
                            <span className="inline-block px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">
                              招聘中
                            </span>
                          </td>
                          <td className="px-4 py-4 text-gray-600">
                            2025-04-10
                          </td>
                          <td className="px-4 py-4">
                            <div className="flex gap-2">
                              <button className="text-primary hover:text-blue-700 text-sm">
                                查看
                              </button>
                              <button className="text-gray-600 hover:text-gray-900 text-sm">
                                编辑
                              </button>
                            </div>
                          </td>
                        </tr> */}
                          {jobTable.map((dataItem) => (
                            <tr
                              key={dataItem.id}
                              className="border-b border-gray-200"
                            >
                              <td className="px-4 py-4">
                                <div className="font-medium text-gray-800">
                                  {dataItem.jobTitle}
                                </div>
                              </td>
                              <td className="px-4 py-4 text-gray-600">
                                {dataItem.jobCategory}
                              </td>
                              <td className="px-4 py-4 text-gray-600">
                                {dataItem.jobLocation}
                              </td>
                              <td className="px-4 py-4 text-gray-600">3</td>
                              <td className="px-4 py-4 text-gray-600">42</td>
                              <td className="px-4 py-4">
                                <span className="inline-block px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">
                                  {dataItem.status}
                                </span>
                              </td>
                              <td className="px-4 py-4 text-gray-600">
                                {dataItem.updatedTime.replace(/T.*$/, "")}
                              </td>
                              <td className="px-4 py-4">
                                <div className="flex gap-2 whitespace-nowrap	">
                                  <button
                                    onClick={() => {
                                      sessionStorage["recruite-view"] = 1;
                                      sessionStorage['recruite-page'] = zhiWeiPage
                                      // sessionStorage['recruite-size'] = jobPageSize
                                      navigate("/jobpost/" + dataItem.id);
                                    }}
                                    className="text-primary hover:text-blue-700 text-sm"
                                  >
                                    查看
                                  </button>
                                  <button
                                    className="text-gray-600 hover:text-gray-900 text-sm"
                                    onClick={() => {
                                      sessionStorage["recruite-edit"] = 1;
                                      sessionStorage['recruite-page'] = zhiWeiPage
                                      // sessionStorage['recruite-size'] = jobPageSize
                                      navigate("/jobpost/" + dataItem.id);
                                    }}
                                  >
                                    编辑
                                  </button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>

                    <div className="flex justify-between items-center mt-4">
                      <div className="text-sm text-gray-600">
                        {/* 显示 1 至 5 条，共 12 条 */}
                      </div>
                      <Pagination
                        align="start"
                        current={zhiWeiPage}
                        pageSize={jobPageSize}
                        total={jobTotal}
                        onChange={onZhiWeiPageChange}
                      />
                      {/* <div className="flex gap-2">
                      <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                        <i className="ri-arrow-left-s-line"></i>
                      </button>
                      <button className="w-8 h-8 flex items-center justify-center border border-primary bg-primary text-white rounded">
                        1
                      </button>
                      <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                        2
                      </button>
                      <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                        3
                      </button>
                      <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                        <i className="ri-arrow-right-s-line"></i>
                      </button>
                    </div> */}
                    </div>
                  </div>

                  <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm mb-8 hidden">
                    <h3 className="font-medium text-gray-800 mb-4">
                      发布新职位
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          职位名称
                        </label>
                        {/* <input
                      type="text"
                      className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                      placeholder="请输入职位名称"
                    /> */}
                        <Input placeholder="请输入职位名称" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          所属部门
                        </label>
                        <div className="relative">
                          <Select
                            placeholder="请选择部门"
                            style={{ width: "100%" }}
                            options={[
                              { value: "技术部", label: "技术部" },
                              { value: "产品部", label: "产品部" },
                              { value: "设计部", label: "设计部" },
                              { value: "市场部", label: "市场部" },
                              { value: "销售部", label: "销售部" },
                              { value: "人力资源部", label: "人力资源部" },
                            ]}
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          工作地点
                        </label>
                        <div className="relative">
                          <Select
                            placeholder="请选择工作地点"
                            style={{ width: "100%" }}
                            options={[
                              { value: "北京", label: "北京" },
                              { value: "上海", label: "上海" },
                              { value: "广州", label: "广州" },
                              { value: "深圳", label: "深圳" },
                              { value: "杭州", label: "杭州" },
                              { value: "苏州", label: "苏州" },
                            ]}
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          招聘人数
                        </label>
                        <Input type="number" placeholder="请输入招聘人数" />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          工作经验
                        </label>
                        <div className="relative">
                          <Select
                            placeholder="请选择工作经验"
                            style={{ width: "100%" }}
                            options={[
                              { value: "应届毕业生", label: "应届毕业生" },
                              { value: "1-3年", label: "1-3年" },
                              { value: "3-5年", label: "3-5年" },
                              { value: "5-10年", label: "5-10年" },
                              { value: "10年以上", label: "10年以上" },
                            ]}
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          学历要求
                        </label>
                        <div className="relative">
                          <Select
                            placeholder="请选择学历要求"
                            style={{ width: "100%" }}
                            options={[
                              { value: "大专", label: "大专" },
                              { value: "本科", label: "本科" },
                              { value: "硕士", label: "硕士" },
                              { value: "博士", label: "博士" },
                            ]}
                          />
                        </div>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          薪资范围
                        </label>
                        <div className="flex items-center gap-2">
                          <Input type="number" placeholder="最低" />
                          <span className="text-gray-500">-</span>
                          <Input type="number" placeholder="最高" />
                          <span className="text-gray-500 whitespace-nowrap">
                            K/月
                          </span>
                        </div>
                      </div>
                      <div className="md:col-span-2">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          职位描述
                        </label>
                        <textarea
                          className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent h-32"
                          placeholder="请输入职位描述"
                        ></textarea>
                      </div>
                      <div className="md:col-span-2">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          任职要求
                        </label>
                        <textarea
                          className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent h-32"
                          placeholder="请输入任职要求"
                        ></textarea>
                      </div>
                    </div>
                    <div className="flex items-center mt-6">
                      {/* <div className="custom-checkbox" id="ai-matching-checkbox"></div> */}
                      <Checkbox></Checkbox>
                      <label
                        htmlFor="ai-matching-checkbox"
                        className="ml-2 text-gray-700 cursor-pointer"
                      >
                        启用 AI 智能匹配，自动推荐合适候选人
                      </label>
                    </div>
                    <div className="flex justify-end mt-6">
                      <button className="bg-gray-200 text-gray-700 px-4 py-2 rounded-button hover:bg-gray-300 transition-colors mr-3 whitespace-nowrap">
                        保存草稿
                      </button>
                      <button className="bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
                        发布职位
                      </button>
                    </div>
                  </div>
                </div>
              )}

              {activeKey === "hou_xuan_ren_guanli" && (
                <div id="candidate-management" className="tab-content">
                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-4">
                      <h2 className="text-xl font-semibold text-gray-800">
                        候选人管理
                      </h2>
                      <div className="flex items-center gap-3">
                        <button className="text-gray-600 hover:text-gray-900 flex items-center gap-1 whitespace-nowrap">
                          <VerticalAlignBottomOutlined />
                          <span>导出</span>
                        </button>
                        <button className="bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-600 transition-colors flex items-center gap-2 whitespace-nowrap">
                          <UserAddOutlined />
                          <span>添加候选人</span>
                        </button>
                      </div>
                    </div>
                    <p className="text-gray-600">
                      查看和管理所有候选人信息，跟踪招聘进度
                    </p>
                  </div>

                  <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-6">
                    <div className="flex flex-wrap gap-4">
                      <div className="relative">
                        <select className="pl-4 pr-8 py-2 border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
                          <option>所有职位</option>
                          <option>高级前端工程师</option>
                          <option>产品经理</option>
                          <option>UI 设计师</option>
                          <option>人力资源专员</option>
                        </select>
                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                          <i className="ri-arrow-down-s-line"></i>
                        </div>
                      </div>
                      <div className="relative">
                        <select className="pl-4 pr-8 py-2 border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
                          <option>所有阶段</option>
                          <option>简历筛选</option>
                          <option>面试中</option>
                          <option>待入职</option>
                          <option>已入职</option>
                          <option>已淘汰</option>
                        </select>
                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                          <i className="ri-arrow-down-s-line"></i>
                        </div>
                      </div>
                      <div className="relative">
                        <select className="pl-4 pr-8 py-2 border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm">
                          <option>所有来源</option>
                          <option>官网申请</option>
                          <option>内部推荐</option>
                          <option>猎头推荐</option>
                          <option>招聘网站</option>
                        </select>
                        <div className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                          <i className="ri-arrow-down-s-line"></i>
                        </div>
                      </div>
                      <div className="flex-grow">
                        <div className="relative">
                          <input
                            type="text"
                            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-sm"
                            placeholder="搜索候选人姓名、手机号或邮箱"
                          />
                          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center text-gray-400">
                            <i className="ri-search-line"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="mb-8">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="font-medium text-gray-700 flex items-center gap-2">
                        <span>AI 智能匹配推荐</span>
                        <div
                          className="w-5 h-5 flex items-center justify-center text-primary cursor-pointer"
                          title="基于职位要求和候选人简历，AI 自动匹配最合适的候选人"
                        >
                          <i className="ri-question-line"></i>
                        </div>
                      </h3>
                      <div className="flex items-center gap-2">
                        <span className="text-gray-600 text-sm">自动更新</span>
                        <label className="custom-switch">
                          <input
                            type="checkbox"
                            className="custom-switch-input"
                            defaultChecked
                          />
                          <span className="custom-switch-slider"></span>
                        </label>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                        <div className="p-4 border-b border-gray-200">
                          <div className="flex items-center justify-between mb-2">
                            <div className="font-medium text-gray-800">
                              高级前端工程师
                            </div>
                            <div className="flex items-center gap-1 text-primary text-sm">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-user-line"></i>
                              </div>
                              <span>12 位候选人</span>
                            </div>
                          </div>
                          <div className="flex items-center gap-2 text-gray-600 text-sm">
                            <div className="w-4 h-4 flex items-center justify-center">
                              <i className="ri-map-pin-line"></i>
                            </div>
                            <span>北京</span>
                            <span className="mx-1">•</span>
                            <span>3-5年</span>
                          </div>
                        </div>
                        <div className="p-4">
                          <div className="flex items-center justify-between mb-3">
                            <div className="font-medium text-gray-700">
                              匹配度最高的候选人
                            </div>
                            <a
                              href="#"
                              className="text-primary text-sm hover:text-blue-700"
                            >
                              查看全部
                            </a>
                          </div>
                          <div className="space-y-4">
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-primary font-medium">
                                刘
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    刘伟
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">92%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  5 年经验 • 前端开发 • 字节跳动
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-medium">
                                张
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    张雨
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">88%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  4 年经验 • 前端开发 • 腾讯
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 font-medium">
                                王
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    王思远
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">85%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  3 年经验 • 前端开发 • 阿里巴巴
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                        <div className="p-4 border-b border-gray-200">
                          <div className="flex items-center justify-between mb-2">
                            <div className="font-medium text-gray-800">
                              产品经理
                            </div>
                            <div className="flex items-center gap-1 text-primary text-sm">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-user-line"></i>
                              </div>
                              <span>8 位候选人</span>
                            </div>
                          </div>
                          <div className="flex items-center gap-2 text-gray-600 text-sm">
                            <div className="w-4 h-4 flex items-center justify-center">
                              <i className="ri-map-pin-line"></i>
                            </div>
                            <span>北京</span>
                            <span className="mx-1">•</span>
                            <span>3-5年</span>
                          </div>
                        </div>
                        <div className="p-4">
                          <div className="flex items-center justify-between mb-3">
                            <div className="font-medium text-gray-700">
                              匹配度最高的候选人
                            </div>
                            <a
                              href="#"
                              className="text-primary text-sm hover:text-blue-700"
                            >
                              查看全部
                            </a>
                          </div>
                          <div className="space-y-4">
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600 font-medium">
                                陈
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    陈佳
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">94%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  4 年经验 • 产品经理 • 美团
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 font-medium">
                                李
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    李明
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">90%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  5 年经验 • 产品经理 • 百度
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-medium">
                                赵
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    赵雪
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">86%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  3 年经验 • 产品经理 • 京东
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                        <div className="p-4 border-b border-gray-200">
                          <div className="flex items-center justify-between mb-2">
                            <div className="font-medium text-gray-800">
                              UI 设计师
                            </div>
                            <div className="flex items-center gap-1 text-primary text-sm">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-user-line"></i>
                              </div>
                              <span>6 位候选人</span>
                            </div>
                          </div>
                          <div className="flex items-center gap-2 text-gray-600 text-sm">
                            <div className="w-4 h-4 flex items-center justify-center">
                              <i className="ri-map-pin-line"></i>
                            </div>
                            <span>北京</span>
                            <span className="mx-1">•</span>
                            <span>1-3年</span>
                          </div>
                        </div>
                        <div className="p-4">
                          <div className="flex items-center justify-between mb-3">
                            <div className="font-medium text-gray-700">
                              匹配度最高的候选人
                            </div>
                            <a
                              href="#"
                              className="text-primary text-sm hover:text-blue-700"
                            >
                              查看全部
                            </a>
                          </div>
                          <div className="space-y-4">
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-600 font-medium">
                                林
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    林小雨
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">95%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  3 年经验 • UI 设计 • 网易
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 font-medium">
                                周
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    周晓
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">89%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  2 年经验 • UI 设计 • 小米
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 font-medium">
                                吴
                              </div>
                              <div className="flex-grow">
                                <div className="flex items-center justify-between">
                                  <div className="font-medium text-gray-800">
                                    吴佳琪
                                  </div>
                                  <div className="flex items-center gap-1 bg-blue-50 text-primary px-2 py-0.5 rounded text-xs">
                                    <span>匹配度</span>
                                    <span className="font-medium">84%</span>
                                  </div>
                                </div>
                                <div className="text-gray-600 text-sm">
                                  2 年经验 • UI 设计 • 滴滴
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="font-medium text-gray-700">候选人列表</h3>
                      <div className="flex items-center gap-3">
                        <button className="text-gray-600 hover:text-gray-900 flex items-center gap-1 whitespace-nowrap">
                          <div className="w-4 h-4 flex items-center justify-center">
                            <i className="ri-filter-3-line"></i>
                          </div>
                          <span>筛选</span>
                        </button>
                        <button className="text-gray-600 hover:text-gray-900 flex items-center gap-1 whitespace-nowrap">
                          <div className="w-4 h-4 flex items-center justify-center">
                            <i className="ri-list-settings-line"></i>
                          </div>
                          <span>自定义列</span>
                        </button>
                      </div>
                    </div>

                    <div className="overflow-x-auto">
                      <table className="w-full border-collapse">
                        <thead>
                          <tr className="bg-gray-50 text-left">
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              <div className="flex items-center gap-2">
                                <div
                                  className="custom-checkbox"
                                  id="select-all-checkbox"
                                ></div>
                                <span>候选人</span>
                              </div>
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              应聘职位
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              工作经验
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              学历
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              当前阶段
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              匹配度
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              更新时间
                            </th>
                            <th className="px-4 py-3 text-sm font-medium text-gray-600">
                              操作
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr className="border-b border-gray-200">
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <div className="custom-checkbox"></div>
                                <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-primary font-medium text-sm">
                                  刘
                                </div>
                                <div>
                                  <div className="font-medium text-gray-800">
                                    刘伟
                                  </div>
                                  <div className="text-gray-600 text-sm">
                                    13812345678
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              高级前端工程师
                            </td>
                            <td className="px-4 py-4 text-gray-600">5 年</td>
                            <td className="px-4 py-4 text-gray-600">本科</td>
                            <td className="px-4 py-4">
                              <span className="inline-block px-2 py-1 bg-yellow-50 text-yellow-600 text-xs rounded-full">
                                面试中
                              </span>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-1">
                                <div className="w-16 bg-gray-200 rounded-full h-1.5">
                                  <div
                                    className="bg-primary h-1.5 rounded-full"
                                    style={{ width: "92%" }}
                                  ></div>
                                </div>
                                <span className="text-gray-600">92%</span>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              2025-04-12
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex gap-2">
                                <button className="text-primary hover:text-blue-700 text-sm">
                                  查看
                                </button>
                                <button className="text-gray-600 hover:text-gray-900 text-sm">
                                  编辑
                                </button>
                              </div>
                            </td>
                          </tr>
                          <tr className="border-b border-gray-200">
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <div className="custom-checkbox"></div>
                                <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-600 font-medium text-sm">
                                  陈
                                </div>
                                <div>
                                  <div className="font-medium text-gray-800">
                                    陈佳
                                  </div>
                                  <div className="text-gray-600 text-sm">
                                    13987654321
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              产品经理
                            </td>
                            <td className="px-4 py-4 text-gray-600">4 年</td>
                            <td className="px-4 py-4 text-gray-600">硕士</td>
                            <td className="px-4 py-4">
                              <span className="inline-block px-2 py-1 bg-green-50 text-green-600 text-xs rounded-full">
                                待入职
                              </span>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-1">
                                <div className="w-16 bg-gray-200 rounded-full h-1.5">
                                  <div
                                    className="bg-primary h-1.5 rounded-full"
                                    style={{ width: "94%" }}
                                  ></div>
                                </div>
                                <span className="text-gray-600">94%</span>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              2025-04-10
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex gap-2">
                                <button className="text-primary hover:text-blue-700 text-sm">
                                  查看
                                </button>
                                <button className="text-gray-600 hover:text-gray-900 text-sm">
                                  编辑
                                </button>
                              </div>
                            </td>
                          </tr>
                          <tr className="border-b border-gray-200">
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <div className="custom-checkbox"></div>
                                <div className="w-8 h-8 bg-pink-100 rounded-full flex items-center justify-center text-pink-600 font-medium text-sm">
                                  林
                                </div>
                                <div>
                                  <div className="font-medium text-gray-800">
                                    林小雨
                                  </div>
                                  <div className="text-gray-600 text-sm">
                                    13566778899
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              UI 设计师
                            </td>
                            <td className="px-4 py-4 text-gray-600">3 年</td>
                            <td className="px-4 py-4 text-gray-600">本科</td>
                            <td className="px-4 py-4">
                              <span className="inline-block px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">
                                简历筛选
                              </span>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-1">
                                <div className="w-16 bg-gray-200 rounded-full h-1.5">
                                  <div
                                    className="bg-primary h-1.5 rounded-full"
                                    style={{ width: "95%" }}
                                  ></div>
                                </div>
                                <span className="text-gray-600">95%</span>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              2025-04-08
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex gap-2">
                                <button className="text-primary hover:text-blue-700 text-sm">
                                  查看
                                </button>
                                <button className="text-gray-600 hover:text-gray-900 text-sm">
                                  编辑
                                </button>
                              </div>
                            </td>
                          </tr>
                          <tr className="border-b border-gray-200">
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <div className="custom-checkbox"></div>
                                <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-medium text-sm">
                                  张
                                </div>
                                <div>
                                  <div className="font-medium text-gray-800">
                                    张雨
                                  </div>
                                  <div className="text-gray-600 text-sm">
                                    13911223344
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              高级前端工程师
                            </td>
                            <td className="px-4 py-4 text-gray-600">4 年</td>
                            <td className="px-4 py-4 text-gray-600">本科</td>
                            <td className="px-4 py-4">
                              <span className="inline-block px-2 py-1 bg-yellow-50 text-yellow-600 text-xs rounded-full">
                                面试中
                              </span>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-1">
                                <div className="w-16 bg-gray-200 rounded-full h-1.5">
                                  <div
                                    className="bg-primary h-1.5 rounded-full"
                                    style={{ width: "88%" }}
                                  ></div>
                                </div>
                                <span className="text-gray-600">88%</span>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              2025-04-05
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex gap-2">
                                <button className="text-primary hover:text-blue-700 text-sm">
                                  查看
                                </button>
                                <button className="text-gray-600 hover:text-gray-900 text-sm">
                                  编辑
                                </button>
                              </div>
                            </td>
                          </tr>
                          <tr className="border-b border-gray-200">
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <div className="custom-checkbox"></div>
                                <div className="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 font-medium text-sm">
                                  李
                                </div>
                                <div>
                                  <div className="font-medium text-gray-800">
                                    李明
                                  </div>
                                  <div className="text-gray-600 text-sm">
                                    13855667788
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              产品经理
                            </td>
                            <td className="px-4 py-4 text-gray-600">5 年</td>
                            <td className="px-4 py-4 text-gray-600">本科</td>
                            <td className="px-4 py-4">
                              <span className="inline-block px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-full">
                                简历筛选
                              </span>
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-1">
                                <div className="w-16 bg-gray-200 rounded-full h-1.5">
                                  <div
                                    className="bg-primary h-1.5 rounded-full"
                                    style={{ width: "90%" }}
                                  ></div>
                                </div>
                                <span className="text-gray-600">90%</span>
                              </div>
                            </td>
                            <td className="px-4 py-4 text-gray-600">
                              2025-04-02
                            </td>
                            <td className="px-4 py-4">
                              <div className="flex gap-2">
                                <button className="text-primary hover:text-blue-700 text-sm">
                                  查看
                                </button>
                                <button className="text-gray-600 hover:text-gray-900 text-sm">
                                  编辑
                                </button>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>

                    <div className="flex justify-between items-center mt-4">
                      <div className="text-sm text-gray-600">
                        显示 1 至 5 条，共 28 条
                      </div>
                      <div className="flex gap-2">
                        <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                          <i className="ri-arrow-left-s-line"></i>
                        </button>
                        <button className="w-8 h-8 flex items-center justify-center border border-primary bg-primary text-white rounded">
                          1
                        </button>
                        <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                          2
                        </button>
                        <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                          3
                        </button>
                        <button className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded text-gray-600 hover:border-primary hover:text-primary">
                          <i className="ri-arrow-right-s-line"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              <div id="interview-settings" className="tab-content hidden">
                <div className="mb-6">
                  <div className="flex items-center justify-between mb-4">
                    <h2 className="text-xl font-semibold text-gray-800">
                      面试设置
                    </h2>
                    <button className="bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-600 transition-colors whitespace-nowrap">
                      保存设置
                    </button>
                  </div>
                  <p className="text-gray-600">
                    配置面试流程和数字人面试官，提高招聘效率
                  </p>
                </div>

                <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm mb-8">
                  <h3 className="font-medium text-gray-800 mb-4">
                    面试流程设置
                  </h3>
                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-4">
                      <div className="text-gray-700">面试轮次</div>
                      <button className="text-primary hover:text-blue-700 flex items-center gap-1 text-sm whitespace-nowrap">
                        <div className="w-4 h-4 flex items-center justify-center">
                          <i className="ri-add-line"></i>
                        </div>
                        <span>添加轮次</span>
                      </button>
                    </div>
                    <div className="space-y-4">
                      <div className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          1
                        </div>
                        <div className="flex-grow">
                          <div className="flex items-center justify-between mb-1">
                            <div className="font-medium text-gray-800">
                              初筛面试
                            </div>
                            <div className="flex items-center gap-2">
                              <button className="text-gray-500 hover:text-gray-700">
                                <div className="w-5 h-5 flex items-center justify-center">
                                  <i className="ri-edit-line"></i>
                                </div>
                              </button>
                              <button className="text-gray-500 hover:text-gray-700">
                                <div className="w-5 h-5 flex items-center justify-center">
                                  <i className="ri-delete-bin-line"></i>
                                </div>
                              </button>
                            </div>
                          </div>
                          <div className="flex items-center gap-3 text-sm text-gray-600">
                            <div className="flex items-center gap-1">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-user-3-line"></i>
                              </div>
                              <span>数字人面试官</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-time-line"></i>
                              </div>
                              <span>30 分钟</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          2
                        </div>
                        <div className="flex-grow">
                          <div className="flex items-center justify-between mb-1">
                            <div className="font-medium text-gray-800">
                              技术面试
                            </div>
                            <div className="flex items-center gap-2">
                              <button className="text-gray-500 hover:text-gray-700">
                                <div className="w-5 h-5 flex items-center justify-center">
                                  <i className="ri-edit-line"></i>
                                </div>
                              </button>
                              <button className="text-gray-500 hover:text-gray-700">
                                <div className="w-5 h-5 flex items-center justify-center">
                                  <i className="ri-delete-bin-line"></i>
                                </div>
                              </button>
                            </div>
                          </div>
                          <div className="flex items-center gap-3 text-sm text-gray-600">
                            <div className="flex items-center gap-1">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-user-3-line"></i>
                              </div>
                              <span>技术主管</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-time-line"></i>
                              </div>
                              <span>60 分钟</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          3
                        </div>
                        <div className="flex-grow">
                          <div className="flex items-center justify-between mb-1">
                            <div className="font-medium text-gray-800">
                              HR 面试
                            </div>
                            <div className="flex items-center gap-2">
                              <button className="text-gray-500 hover:text-gray-700">
                                <div className="w-5 h-5 flex items-center justify-center">
                                  <i className="ri-edit-line"></i>
                                </div>
                              </button>
                              <button className="text-gray-500 hover:text-gray-700">
                                <div className="w-5 h-5 flex items-center justify-center">
                                  <i className="ri-delete-bin-line"></i>
                                </div>
                              </button>
                            </div>
                          </div>
                          <div className="flex items-center gap-3 text-sm text-gray-600">
                            <div className="flex items-center gap-1">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-user-3-line"></i>
                              </div>
                              <span>HR 经理</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <div className="w-4 h-4 flex items-center justify-center">
                                <i className="ri-time-line"></i>
                              </div>
                              <span>45 分钟</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-4">
                      <div className="text-gray-700">自动化设置</div>
                    </div>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                        <div className="flex items-center gap-3">
                          <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                            <i className="ri-mail-send-line"></i>
                          </div>
                          <div>
                            <div className="font-medium text-gray-800">
                              自动发送面试邀请
                            </div>
                            <div className="text-sm text-gray-600">
                              当候选人通过简历筛选后，自动发送面试邀请
                            </div>
                          </div>
                        </div>
                        <label className="custom-switch">
                          <input
                            type="checkbox"
                            className="custom-switch-input"
                            defaultChecked
                          />
                          <span className="custom-switch-slider"></span>
                        </label>
                      </div>
                      <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                        <div className="flex items-center gap-3">
                          <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                            <i className="ri-notification-3-line"></i>
                          </div>
                          <div>
                            <div className="font-medium text-gray-800">
                              面试提醒
                            </div>
                            <div className="text-sm text-gray-600">
                              面试前 24 小时和 1 小时自动发送提醒
                            </div>
                          </div>
                        </div>
                        <label className="custom-switch">
                          <input
                            type="checkbox"
                            className="custom-switch-input"
                            defaultChecked
                          />
                          <span className="custom-switch-slider"></span>
                        </label>
                      </div>
                      <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                        <div className="flex items-center gap-3">
                          <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                            <i className="ri-file-text-line"></i>
                          </div>
                          <div>
                            <div className="font-medium text-gray-800">
                              自动生成面试评估报告
                            </div>
                            <div className="text-sm text-gray-600">
                              面试结束后，AI 自动生成面试评估报告
                            </div>
                          </div>
                        </div>
                        <label className="custom-switch">
                          <input
                            type="checkbox"
                            className="custom-switch-input"
                            defaultChecked
                          />
                          <span className="custom-switch-slider"></span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm mb-8">
                  <div className="flex items-center justify-between mb-6">
                    <h3 className="font-medium text-gray-800">
                      数字人面试官设置
                    </h3>
                    <div className="flex items-center gap-2">
                      <span className="text-gray-600 text-sm">
                        启用数字人面试官
                      </span>
                      <label className="custom-switch">
                        <input
                          type="checkbox"
                          className="custom-switch-input"
                          defaultChecked
                        />
                        <span className="custom-switch-slider"></span>
                      </label>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <div className="mb-6">
                        <div className="text-gray-700 mb-4">选择数字人形象</div>
                        <div className="grid grid-cols-3 gap-4">
                          <div className="border-2 border-primary rounded-lg p-2 cursor-pointer">
                            <img
                              src="https://readdy.ai/api/search-image?query=professional%20asian%20female%20with%20business%20attire%2C%20short%20hair%2C%20friendly%20smile%2C%20plain%20background%2C%20portrait%2C%20realistic&width=100&height=100&seq=1&orientation=squarish"
                              alt="数字人形象"
                              className="w-full h-auto rounded object-top"
                            />
                            <div className="text-center mt-2 text-sm font-medium text-gray-700">
                              李娜
                            </div>
                          </div>
                          <div className="border border-gray-200 rounded-lg p-2 cursor-pointer hover:border-primary">
                            <img
                              src="https://readdy.ai/api/search-image?query=professional%20asian%20male%20with%20business%20suit%2C%20glasses%2C%20friendly%20smile%2C%20plain%20background%2C%20portrait%2C%20realistic&width=100&height=100&seq=2&orientation=squarish"
                              alt="数字人形象"
                              className="w-full h-auto rounded object-top"
                            />
                            <div className="text-center mt-2 text-sm font-medium text-gray-700">
                              王军
                            </div>
                          </div>
                          <div className="border border-gray-200 rounded-lg p-2 cursor-pointer hover:border-primary">
                            <img
                              src="https://readdy.ai/api/search-image?query=professional%20caucasian%20female%20with%20business%20attire%2C%20blonde%20hair%2C%20friendly%20smile%2C%20plain%20background%2C%20portrait%2C%20realistic&width=100&height=100&seq=3&orientation=squarish"
                              alt="数字人形象"
                              className="w-full h-auto rounded object-top"
                            />
                            <div className="text-center mt-2 text-sm font-medium text-gray-700">
                              Emma
                            </div>
                          </div>
                        </div>
                      </div>

                      <div className="mb-6">
                        <label className="block text-gray-700 mb-2">
                          数字人名称
                        </label>
                        <input
                          type="text"
                          className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                          defaultValue="李娜"
                          placeholder="请输入数字人名称"
                        />
                      </div>

                      <div className="mb-6">
                        <label className="block text-gray-700 mb-2">
                          语音设置
                        </label>
                        <div className="relative">
                          <select className="w-full px-4 py-2 border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8">
                            <option>标准女声</option>
                            <option>标准男声</option>
                            <option>温柔女声</option>
                            <option>沉稳男声</option>
                          </select>
                          <div className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                            <i className="ri-arrow-down-s-line"></i>
                          </div>
                        </div>
                      </div>

                      <div className="mb-6">
                        <label className="block text-gray-700 mb-2">
                          语速调节
                        </label>
                        <input
                          type="range"
                          className="custom-range w-full"
                          min="0.5"
                          max="2"
                          step="0.1"
                          defaultValue="1"
                        />
                        <div className="flex justify-between text-xs text-gray-500 mt-1">
                          <span>慢</span>
                          <span>正常</span>
                          <span>快</span>
                        </div>
                      </div>
                    </div>

                    <div>
                      <div className="mb-6">
                        <label className="block text-gray-700 mb-2">
                          面试风格
                        </label>
                        <div className="space-y-3">
                          <div className="flex items-center gap-2">
                            <div
                              className="custom-radio checked"
                              id="style-radio-1"
                            ></div>
                            <label
                              htmlFor="style-radio-1"
                              className="text-gray-700 cursor-pointer"
                            >
                              标准专业型 - 注重专业能力和工作经验的评估
                            </label>
                          </div>
                          <div className="flex items-center gap-2">
                            <div
                              className="custom-radio"
                              id="style-radio-2"
                            ></div>
                            <label
                              htmlFor="style-radio-2"
                              className="text-gray-700 cursor-pointer"
                            >
                              行为分析型 - 通过过往经历分析候选人的行为模式
                            </label>
                          </div>
                          <div className="flex items-center gap-2">
                            <div
                              className="custom-radio"
                              id="style-radio-3"
                            ></div>
                            <label
                              htmlFor="style-radio-3"
                              className="text-gray-700 cursor-pointer"
                            >
                              压力测试型 - 通过一定压力测试候选人的应变能力
                            </label>
                          </div>
                          <div className="flex items-center gap-2">
                            <div
                              className="custom-radio"
                              id="style-radio-4"
                            ></div>
                            <label
                              htmlFor="style-radio-4"
                              className="text-gray-700 cursor-pointer"
                            >
                              创新思维型 - 注重候选人的创新能力和思维方式
                            </label>
                          </div>
                        </div>
                      </div>

                      <div className="mb-6">
                        <label className="block text-gray-700 mb-2">
                          自定义面试问题
                        </label>
                        <div className="border border-gray-200 rounded-lg p-4 mb-3">
                          <div className="flex items-center justify-between mb-2">
                            <div className="font-medium text-gray-700">
                              通用问题
                            </div>
                            <button className="text-primary hover:text-blue-700 text-sm">
                              编辑
                            </button>
                          </div>
                          <div className="text-gray-600 text-sm">
                            已配置 15 个通用问题
                          </div>
                        </div>
                        <div className="border border-gray-200 rounded-lg p-4 mb-3">
                          <div className="flex items-center justify-between mb-2">
                            <div className="font-medium text-gray-700">
                              技术类问题
                            </div>
                            <button className="text-primary hover:text-blue-700 text-sm">
                              编辑
                            </button>
                          </div>
                          <div className="text-gray-600 text-sm">
                            已配置 24 个技术类问题
                          </div>
                        </div>
                        <div className="border border-gray-200 rounded-lg p-4">
                          <div className="flex items-center justify-between mb-2">
                            <div className="font-medium text-gray-700">
                              行为类问题
                            </div>
                            <button className="text-primary hover:text-blue-700 text-sm">
                              编辑
                            </button>
                          </div>
                          <div className="text-gray-600 text-sm">
                            已配置 18 个行为类问题
                          </div>
                        </div>
                      </div>

                      <div>
                        <div className="flex items-center gap-2 mb-4">
                          <div
                            className="custom-checkbox checked"
                            id="ai-adaptive-checkbox"
                          ></div>
                          <label
                            htmlFor="ai-adaptive-checkbox"
                            className="text-gray-700 cursor-pointer"
                          >
                            启用 AI 自适应问题，根据候选人回答动态调整问题
                          </label>
                        </div>
                        <div className="flex items-center gap-2">
                          <div
                            className="custom-checkbox checked"
                            id="ai-analysis-checkbox"
                          ></div>
                          <label
                            htmlFor="ai-analysis-checkbox"
                            className="text-gray-700 cursor-pointer"
                          >
                            启用 AI 实时分析，评估候选人回答质量
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
                  <h3 className="font-medium text-gray-800 mb-4">
                    面试评分标准
                  </h3>
                  <div className="space-y-4 mb-6">
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          <i className="ri-code-box-line"></i>
                        </div>
                        <div>
                          <div className="font-medium text-gray-800">
                            专业技能
                          </div>
                          <div className="text-sm text-gray-600">
                            评估候选人的专业知识和技能水平
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-gray-600 text-sm">权重</span>
                        <div className="relative w-20">
                          <select className="w-full px-2 py-1 border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-6 text-sm">
                            <option>40%</option>
                            <option>30%</option>
                            <option>20%</option>
                            <option>10%</option>
                          </select>
                          <div className="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                            <i className="ri-arrow-down-s-line"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          <i className="ri-user-heart-line"></i>
                        </div>
                        <div>
                          <div className="font-medium text-gray-800">
                            沟通能力
                          </div>
                          <div className="text-sm text-gray-600">
                            评估候选人的表达能力和沟通效果
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-gray-600 text-sm">权重</span>
                        <div className="relative w-20">
                          <select className="w-full px-2 py-1 border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-6 text-sm">
                            <option>20%</option>
                            <option>30%</option>
                            <option>40%</option>
                            <option>10%</option>
                          </select>
                          <div className="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                            <i className="ri-arrow-down-s-line"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          <i className="ri-team-line"></i>
                        </div>
                        <div>
                          <div className="font-medium text-gray-800">
                            团队协作
                          </div>
                          <div className="text-sm text-gray-600">
                            评估候选人的团队合作精神和协作能力
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-gray-600 text-sm">权重</span>
                        <div className="relative w-20">
                          <select className="w-full px-2 py-1 border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-6 text-sm">
                            <option>20%</option>
                            <option>30%</option>
                            <option>10%</option>
                            <option>40%</option>
                          </select>
                          <div className="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                            <i className="ri-arrow-down-s-line"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 flex items-center justify-center bg-blue-50 text-primary rounded-full">
                          <i className="ri-creative-commons-line"></i>
                        </div>
                        <div>
                          <div className="font-medium text-gray-800">
                            创新思维
                          </div>
                          <div className="text-sm text-gray-600">
                            评估候选人的创新能力和解决问题的思路
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-gray-600 text-sm">权重</span>
                        <div className="relative w-20">
                          <select className="w-full px-2 py-1 border border-gray-300 rounded appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-6 text-sm">
                            <option>20%</option>
                            <option>10%</option>
                            <option>30%</option>
                            <option>40%</option>
                          </select>
                          <div className="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 flex items-center justify-center pointer-events-none">
                            <i className="ri-arrow-down-s-line"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button className="text-primary hover:text-blue-700 flex items-center gap-1 text-sm whitespace-nowrap">
                    <div className="w-4 h-4 flex items-center justify-center">
                      <i className="ri-add-line"></i>
                    </div>
                    <span>添加评分项</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </>
  );
};
